<template>
  <div id="title"><h2>入库管理--入库列表</h2></div>
  <span id="button-add">
    <router-link :to="{ name: 'addwarehouse' }">
      <a-button type="primary">添加<plus-circle-outlined /></a-button>
      <router-view></router-view>
    </router-link>
  </span>
  <a-table
    :columns="columns"
    :data-source="dataSource.data"
    :pagination="pag.pagination"
    bordered
  >
    <template #bodyCell="{ column, text, record }">
      <template
        v-if="
          [
            'indexNum',
            'commodityName',
            'warehouseNum',
            'unit',
            'warehouseTime',
          ].includes(column.dataIndex)
        "
      >
        <div>
          <a-input
            v-if="editableData[record.key]"
            v-model:value="editableData[record.key][column.dataIndex]"
            style="margin: -5px 0"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template v-else-if="column.dataIndex === 'operation'">
        <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record)">
              <a-button type="primary" size="small"
                >保存</a-button
              ></a-typography-link
            >
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a><a-button type="dashed" size="small" danger>取消</a-button></a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a-button
              type="primary"
              size="small"
              id="button-edit"
              @click="updatePur(record), showModal()"
              >编辑</a-button
            >

            <a-button type="danger" size="small" @click="deleteWre(record)"
              >删除</a-button
            >
          </span>
        </div>
      </template>
    </template>
  </a-table>
  <a-modal v-model:visible="visible" title="修改采购信息" @ok="handleOk">
    <a-form
      :model="forUpdate"
      v-bind="layout"
      name="nest-messages"
      :validate-messages="validateMessages"
      @finish="onFinish"
      labelAlign="left"
    >
      <a-form-item
        :name="['update', 'commodityName']"
        :rules="[{ required: true }]"
        label="入库商品"
      >
        <a-input v-model:value="forUpdate.update.commodityName" />
      </a-form-item>
      <a-form-item
        :name="['update', 'warehouseNum']"
        :rules="[{ required: true }]"
        label="入库数量"
      >
        <a-input v-model:value="forUpdate.update.warehouseNum" />
      </a-form-item>
      <a-form-item
        :name="['update', 'unit']"
        :rules="[{ required: true }]"
        label="入库单位"
      >
        <a-input v-model:value="forUpdate.update.unit" />
      </a-form-item>

      <a-form-item
        :name="['update', 'warehouseTime']"
        :rules="[{ required: true }]"
        label="入库时间"
      >
        <a-input v-model:value="forUpdate.update.warehouseTime" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { cloneDeep } from "lodash-es";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { message } from "ant-design-vue";
import {
  getAllWareHouses,
  updateOneWarehouse,
  deleteWarehouse,
} from "@/api/warehouse";
const columns = [
  {
    title: "序号",
    dataIndex: "key",
    width: "10%",
  },
  {
    title: "入库商品",
    dataIndex: "commodityName",
    width: "20%",
  },
  {
    title: "入库数量",
    dataIndex: "warehouseNum",
    width: "20%",
  },
  {
    title: "入库单位",
    dataIndex: "unit",
    width: "10%",
  },
  {
    title: "入库时间",
    dataIndex: "warehouseTime",
    width: "20%",
  },
  {
    title: "操作",
    dataIndex: "operation",
  },
];

let data = [];
export default defineComponent({
  name: "warehouse",

  setup() {
    const dataSource = reactive({
      data: [],
    });
    const pag = reactive({
      pagination: {
        total: 50,
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["7", "10", "15", "20"],
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
      },
    });
    const forUpdate = reactive({
      update: {
        warehouseId: 0,
        commodityName: "",
        warehouseNum: "",
        unit: "",
        warehouseTime: "",
      },
    });
    // ----------------------------------------------------------------------------
    onMounted(() => {
      getWarehouses();
    });
    const getWarehouses = async () => {
      await getAllWareHouses({}).then((response) => {
        let res = response.data;
        dataSource.data = [];
        pag.pagination.total = res.length;
        console.log(pag.pagination.total);
        for (let i = 0; i < res.length; i++) {
          dataSource.data.push({
            key: (i + 1).toString(),
            warehouseId: res[i].warehouseId,
            commodityName: res[i].commodityName,
            warehouseNum: res[i].warehouseNum,
            unit: res[i].unit,
            warehouseTime: res[i].warehouseTime,
            operation: "",
          });
        }
      });
    };
    const updatePur = (val) => {
      forUpdate.update.warehouseId = val.warehouseId;
      forUpdate.update.commodityName = val.commodityName;
      forUpdate.update.warehouseNum = val.warehouseNum;
      forUpdate.update.unit = val.unit;
      forUpdate.update.warehouseTime = val.warehouseTime;
    };
    const handleOk = async () => {
      await updateOneWarehouse(forUpdate.update).then((res) => {
        if (res.code == 200) {
          message.success("修改成功");
          dataSource.data = [];
          getWarehouses();
        } else {
          message.error("修改失败");
        }
      });
    };

    const deletemessage = (val) => {
      if (val == 200) {
        message.success("删除成功", 3);
      } else {
        message.error("删除失败", 3);
      }
    };
    const deleteWre = async (val) => {
      await deleteWarehouse({ warehouseId: val.warehouseId }).then((res) => {
        if (res.code == 200) {
          deletemessage(res.code);
          getWarehouses();
        } else {
          deletemessage(res.code);
        }
      });
    };

    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const validateMessages = {
      required: "${label} is required!",
    };

    const onFinish = (values) => {
      console.log("Success:", values);
    };
    const visible = ref(false);
    const editableData = reactive({});
    const UpdateList = (val) => {
      updateOnePurchase(val).then((res) => {
        if (res.code == 200) {
          console.log("修改成功");
        }
      });
    };

    visible.value = false;
    const showModal = () => {
      visible.value = true;
    };

    return {
      columns,
      editingKey: "",
      editableData,
      data,
      visible,
      pag,
      forUpdate,
      dataSource,
      showModal,
      getWarehouses,
      deleteWre,
      updatePur,
      onFinish,
      handleOk,
      layout,
      validateMessages,
      //   forUpdate,
      // AddOnePurchase,
    };
  },

  data() {
    return {
      data,
      Update: {
        purchaseId: "",
        commodityId: "",
        supplierName: "",
        purchaseNum: 0,
        purchaseTime: "",
      },

      pagination: {
        total: 50,
        defaultPageSize: 10,
        showTotal: (total) => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ["7", "10", "15", "20"],
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
      },
    };
  },
  methods: {},
});
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
#button-edit {
  margin-right: 15px;
}
#button-add {
  float: left;
  display: block;
  margin-bottom: 10px;
}
#title {
  margin-left: 0px;
}
h2 {
  width: 190px;
  padding-left: 0px;
}
</style>